<script setup>
import { ref } from 'vue'
import useUserInfoStore from '@/stores/userInfo.js'
const userInfoStore = useUserInfoStore();
const userInfo = ref({...userInfoStore.info})
const passwordData=ref({
    password:'',
    newPassword:'',
    rePassword:''
})

const checkRePassword=(rule,value,callback)=>{
    if(value===''){
        console.log("error");
        callback(new Error('请再次确认密码'))
    }
    else if(value!==passwordData.value.newPassword){
        callback(new Error('请再次确保两次输入的密码一样'))
    }
    else {
        callback()
    }
}
const rules={
    newPassword:[
        {required:true,message:'请输入新密码',trigger:'blur'},
        {min: 5,max: 16,message:'长度为5-16位非空字符',trigger:'blur'}

    ],
    password:[
    {required:true,message:'请输入原密码',trigger:'blur'},
    {min: 5,max: 16,message:'长度为5-16位非空字符串',trigger:'blur'}
    ],
    rePassword:[
        {validator:checkRePassword,trigger:'blur'}
    ]
}

//修改个人信息
import {updatePasswordService} from '@/api/user.js'
import {ElMessage} from 'element-plus'
const updatePassword=async()=>{
    //调用接口
    let result=await updatePasswordService(passwordData.value);
    ElMessage.success(result.msg?result.mag:'修改成功');

}
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>重置密码</span>
            </div>
        </template>
        <!-- 而 Element Plus 的 <el-form> 组件中的 model 属性则是用来指定表单数据对象，以便在表单验证时进行校验。这个 model 属性需要和表单元素中的 prop 属性一起使用，从而建立起表单元素与 model 中数据的映射关系，以便进行规则校验和提交操作。
因此，为了实现完整的表单功能（包括数据绑定、校验等），通常需要同时使用 v-model 和 model。v-model 主要用于实现数据的双向绑定，而 model 主要用于配合 Element Plus 的表单验证机制。
当然，在某些情况下，如果不需要进行表单校验，你可以只使用 v-model 来实现简单的数据双向绑定，而不需要额外使用 model。但如果涉及到表单校验等复杂场景，建议还是同时结合使用 v-model 和 model，以实现更完善的表单功能。 -->
        <el-row>
            <el-col :span="12">
                <el-form :model="passwordData" :rules="rules" label-width="100px" size="large">
                    <el-form-item label="原密码" prop="password">
                        <el-input v-model="passwordData.password" type="password"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="新密码" prop="newPassword" >
                        <el-input v-model="passwordData.newPassword" type="password"></el-input>
                    </el-form-item>

                    <el-form-item label="重复密码" prop="rePassword">
                        <el-input v-model="passwordData.rePassword" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="updatePassword">提交修改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>